<template>
  <!-- element-loading-background="rgba(0, 0, 0, 0.03)"
    element-loading-text="数据加载中"
    element-loading-spinner="el-icon-loading" -->
  <el-table
    border
    :data="tableData"
    ref="table"
    class="table"
    :header-cell-style="{
      padding: '2.5px 0',
      background: '#ECF1F7',
      textAlign: 'center',
    }"
    @selection-change="handleSelect"
    :height="height"
    :cell-style="{ textAlign: 'center' }"
    v-loading="tableLoading"
  >
    
    <div v-for="(item, index) in tableHeader" :key="`tableHeader-${index}`">
      <!-- 多选框 -->
      <el-table-column
        v-if="item.type == 'selection'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>
      <!-- 索引行 -->
      <el-table-column
        v-else-if="item.type == 'index'"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      ></el-table-column>
      <!-- 状态类型 -->
      <el-table-column
        v-else-if="item.type == 'status'"
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        :formatter="item.formatter"
      >
        <template slot-scope="scope">
          <el-tag
            type="success"
            v-if="item.formatter(scope.row).createStatus == 1"
            >{{ item.formatter(scope.row).value }}</el-tag
          >
          <el-tag v-else-if="item.formatter(scope.row).createStatus == 2">{{
            item.formatter(scope.row).value
          }}</el-tag>
          <el-tag
            type="info"
            v-else-if="item.formatter(scope.row).createStatus == 3"
            >{{ item.formatter(scope.row).value }}</el-tag
          >
          <el-tag
            type="warning"
            v-else-if="item.formatter(scope.row).createStatus == 4"
            >{{ item.formatter(scope.row).value }}</el-tag
          >
          <el-tag
            type="danger"
            v-else-if="item.formatter(scope.row).createStatus == 0"
            >{{ item.formatter(scope.row).value }}</el-tag
          >
          <span v-else>{{ item.formatter(scope.row).value }}</span>
        </template>
      </el-table-column>
      <!-- 操作按钮 -->
      <el-table-column
        v-else-if="item.type == 'operation'"
        :label="item.label"
        :min-width="item.width"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <span
            class="operate-btn"
            v-for="(temp, ind) in item.operation"
            :key="ind"
            @click="temp.clickFun(scope.row)"
          >
            <el-button
              plain
              :type="temp.type"
              :size="temp.size"
              v-if="temp.isShow && scope.row.result != 1"
            >
              {{ temp.name }}
            </el-button>
            <el-button
              plain
              :type="temp.type"
              :size="temp.size"
              v-else-if="!temp.isShow"
            >
              {{ temp.name }}
            </el-button>
          </span>
        </template>
      </el-table-column>

      <!-- 自定义内容 -->
      <el-table-column
        v-else-if="item.slot"
        :type="item.type"
        :width="item.width"
        :label="item.label"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <slot
            :name="item.slot"
            :fixed="item.fixed"
            v-bind="{ row: scope.row, column: scope.column }"
          ></slot>
        </template>
        <!-- <slot :name="item.slot" :fixed="item.fixed" :data="item"></slot> -->
        <!--  -->
      </el-table-column>

      <!-- 普通默认类型 -->
      <el-table-column
        v-else
        :label="item.label"
        :min-width="item.width"
        :prop="item.prop"
        :sortable="item.sortable"
        :formatter="item.formatter ? item.formatter : null"
      >
      </el-table-column>
    </div>
  </el-table>
</template>
<script>
export default {
  props: {
    tableHeader: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
    height: {},
    // 默认选中项
    selectData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {};
  },
  watch: {
    selectData: {
      handler(val) {
        //  多选默认选中
        if (val && val.length > 0) {
          this.$nextTick(() => {
            val.forEach((row) => {
              this.$refs.table.toggleRowSelection(
                this.tableData.find((item) => {
                  return row.semaphoreCode == item.code; // 注意这里寻找的字段要唯一，示例仅参考
                }),
                true
              );
            });
          });
        }
      },
      deep: true, //对象内部的属性监听，也叫深度监听
      immediate: true,
    },
  },
  methods: {
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection);
    },
  },
};
</script>

<style scoped>
/* 设置表格各行的padding值 */
::v-deep.el-table .el-table__cell {
  padding: 5.5px 0;
}
/* 设置表格隔行变色 */
/* ::v-deep .el-table__row:nth-child(even) {
  background-color: #dee2ee;
} */
/* 设定鼠标划过表格样式 */
::v-deep .el-table__body tr.hover-row > td.el-table__cell {
  background-color: #d6e5f8;
}
.operate-btn {
  margin-right: 10px;
}
</style>